<template>
  <view class="detail">
    <navbars
      title="云上农夫"
      urls="/packageA/search/index"
      types="navigate"
      imgs="/static/search.jpg"
    />
    <view class="ser">
      <navigator
        url="/pages/mine/index"
        open-type="switchTab"
        hover-class="none"
      >
        <u-icon size="30" name="/static/cx.jpg" class="ico"></u-icon>
      </navigator>
      <ugo-search class="sss" :keyword="keyword" />
    </view>
    <u-sticky bgColor="#f9f9f9">
      <u-tabs
        :list="list1"
        lineWidth="0"
        lineColor="#fff"
        :activeStyle="{
          color: '#fff',
          background: '#9A9390',
          padding: '20rpx 30rpx',
          borderRadius: '50%',
          transform: 'scale(1.05)',
        }"
        :inactiveStyle="{
          color: '#000',
          transform: 'scale(1)',
        }"
        itemStyle="padding-left: 10px; padding-right: 10px; height: 34px;"
      >
      </u-tabs>
    </u-sticky>
    <view :class="active ? 'pxactive' : 'px'">
      <u-icon
        size="20"
        name="map"
        class="ico"
        color="#D8D8D8"
        v-if="active == false"
        @click="sxopens"
      ></u-icon>
      <u-icon
        size="20"
        name="map"
        @click="chooseCol"
        color="#000"
        v-else
      ></u-icon>
      <view class="pc">
        <text class="tle" @click="sxopens" v-if="active == false"
          >银泰创意城（街道口店）</text
        >
        <u-icon
          name="arrow-down-fill"
          :class="{ arr: active }"
          size="10"
          color="#D8D8D8"
        ></u-icon>
        <view class="pc">
          <template v-for="(st, i) in sortList">
            <view
              class="zx"
              v-if="curIndex == i"
              :key="i"
              @click.stop="sortOpen(i)"
            >
              <text class="names">{{ st.name }}</text>
              <u-icon
                @click="sortOpen(i)"
                name="arrow-down-fill"
                size="10"
                class="sx"
              ></u-icon>
            </view>
          </template>
        </view>
      </view>
      <text class="ss" @click="sxMethod"> 筛选 </text>
      <u-icon name="/static/sx.png" size="16" @click="sxCloses"></u-icon>
    </view>
    <view class="container" v-if="pxOpen">
      <!-- 左侧栏目 -->
      <uni-scroll-view class="left-menu" :scroll-y="true">
        <view>
          <view
            class="left"
            v-for="(item, index) in addList"
            :key="index"
            @click="handleMenuTap(index)"
          >
            <text :class="{ txt: addIndex == index }"> {{ item.type }}</text>
          </view>
        </view>
      </uni-scroll-view>

      <!-- 右侧内容 -->
      <uni-scroll-view class="right-content" :scroll-y="true">
        <view v-if="addIndex !== null">
          <view class="ct-zd" v-show="addIndex == 0">
            <text class="h2">当前指定地址</text>
            <view class="zd-dq">
              <text>银泰创意城（街道口店）</text>
              <u-icon name="/static/back.jpg" size="10"></u-icon>
              <view class="zd-xg">修改地址</view>
            </view>
            <view class="zd-wd">
              <text class="wd">我的地址</text>
              <u-radio-group
                v-model="radiovalue1"
                placement="column"
                @change="groupChange"
                v-for="(item, index) in radiolist1"
                :key="index"
              >
                <view class="wd-item">
                  <view class="wd-add">
                    <text>{{ item.name }}</text>
                    <view class="wd-name">
                      <view>{{ item.user }}</view>
                      <view>{{ item.phone }}</view>
                    </view>
                  </view>
                  <view>
                    <u-radio
                      :customStyle="{ margin: '8px' }"
                      :name="item.name"
                      @change="radioChange"
                    >
                    </u-radio>
                  </view>
                </view>
              </u-radio-group>
            </view>
            <view class="zd-more" v-if="!mores" @click="moreMD">
              <text>展开更多地址</text>
              <u-icon name="arrow-down-fill" size="10" color="#D8D8D8"></u-icon>
            </view>
            <view class="zd-more" v-if="closes" @click="closesMD">
              <text>收起</text>
              <u-icon name="arrow-up-fill" size="10" color="#D8D8D8"></u-icon>
            </view>
            <view class="btn">
              <view class="bt">
                <u-button shape="circle" text="重置"></u-button>
              </view>
              <view class="bt">
                <u-button
                  color="#F6C46F"
                  shape="circle"
                  text="完成"
                  @click="chooseCol()"
                ></u-button>
              </view>
            </view>
          </view>
          <view class="ct-fj" v-show="addIndex == 1">
            <view class="h2"> 我的附近</view>
            <view class="zd-wd">
              <u-radio-group
                v-model="radiovalue1"
                placement="column"
                @change="groupChange"
                v-for="(item, index) in radiolist1"
                :key="index"
              >
                <view class="wd-item">
                  <view class="wd-add">
                    <text>{{ item.name }}</text>
                    <view class="wd-name">
                      <view>{{ item.user }}</view>
                      <view>{{ item.phone }}</view>
                    </view>
                  </view>
                  <view>
                    <u-radio
                      :customStyle="{ marginBottom: '8px' }"
                      :name="item.name"
                      @change="radioChange"
                    >
                    </u-radio>
                  </view>
                </view>
              </u-radio-group>
            </view>
            <view class="zd-more" v-if="!mores" @click="moreMD">
              <text>展开更多地址</text>
              <u-icon name="arrow-down-fill" size="10" color="#D8D8D8"></u-icon>
            </view>
            <view class="zd-more" v-if="closes" @click="closesMD">
              <text>收起</text>
              <u-icon name="arrow-up-fill" size="10" color="#D8D8D8"></u-icon>
            </view>
            <view class="btn">
              <view class="bt">
                <u-button shape="circle" text="重置"></u-button>
              </view>
              <view class="bt">
                <u-button
                  color="#F6C46F"
                  shape="circle"
                  text="完成"
                  @click="chooseCol()"
                ></u-button>
              </view>
            </view>
          </view>
          <view class="ct-xz" v-show="addIndex == 2">
            <view class="h2"> 行政区</view>
            <view class="xz-item">
              <view class="xzz" v-for="(item, i) in areList" :key="i">{{
                item
              }}</view>
            </view>
            <view class="btn">
              <view class="bt">
                <u-button shape="circle" text="重置"></u-button>
              </view>
              <view class="bt">
                <u-button
                  color="#F6C46F"
                  shape="circle"
                  text="完成"
                  @click="chooseCol()"
                ></u-button>
              </view>
            </view>
          </view>
        </view>
      </uni-scroll-view>
    </view>
    <view class="container1" v-if="isOpen">
      <u-radio-group
        v-model="sorts"
        placement="column"
        @change="groupChange1(index)"
        v-for="(item, index) in sortList"
        :key="index"
      >
        <view class="wd-item">
          <view class="wd-add">
            <text>{{ item.name }}</text>
          </view>
          <view class="wd-rd">
            <u-radio
              :customStyle="{ marginBottom: '8px' }"
              :name="item.name"
              @change="radioChange1(index)"
            >
            </u-radio>
          </view>
        </view>
      </u-radio-group>
      <view class="btn">
        <view class="bt">
          <u-button shape="circle" text="重置"></u-button>
        </view>
        <view class="bt">
          <u-button
            color="#F6C46F"
            shape="circle"
            text="完成"
            @click="choosePX()"
          ></u-button>
        </view>
      </view>
    </view>
    <view class="container2" v-if="sxOpen">
      <view class="left">
        <text>筛选</text>
      </view>
      <view class="right">
        <view class="items">
          <text>价格</text>
          <view class="pro">
            <view v-for="(item, i) in pirceList" :key="i" class="prs">
              <view class="ppp">{{ item }}</view>
            </view>
          </view>
          <view class="jg">
            <view class="j-btn">
              <u--input
                placeholder="最低价"
                border="none"
                v-model="top"
                @change="changeTop"
                class="btt"
              ></u--input>
            </view>
            <view class="lins">-</view>
            <view class="j-btn">
              <u--input
                placeholder="最高价"
                class="btt"
                border="none"
                v-model="low"
                @change="changeLow"
              ></u--input>
            </view>
          </view>
          <view>农场类型</view>
          <view class="lx">
            <view v-for="(item, i) in ncList" :key="i" class="lxx">
              <view class="ppp">{{ item }}</view>
            </view>
          </view>
          <view>营业状态</view>
          <view class="lx">
            <view v-for="(item, i) in yyList" :key="i" class="lxx">
              <view class="ppp">{{ item }}</view>
            </view>
          </view>
          <view>农场品质</view>
          <view class="lx">
            <view v-for="(item, i) in pzList" :key="i" class="lxx">
              <view class="ppp">{{ item }}</view>
            </view>
          </view>
        </view>

        <view class="btn">
          <view class="bt">
            <u-button shape="circle" text="重置"></u-button>
          </view>
          <view class="bt">
            <u-button
              color="#F6C46F"
              shape="circle"
              text="完成"
              @click="chooseSx()"
            ></u-button>
          </view>
        </view>
      </view>
    </view>
    <view class="farm">
      <view
        class="farm-item"
        @click="goproductdetails(item.id)"
        v-for="(item, i) in farmList"
        :key="i"
      >
        <view class="fm">
          <image
            class="logo"
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.ivsky.com%2FPhoto%2FOriginalImages%2FMeishiCanyin%2Fshiwuyuanliao%2Fcaiyuanshucai_051117%2F201.jpg&refer=http%3A%2F%2Fimg.ivsky.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1716623197&t=383a47629b2e4ff502db4184f53992f0"
            mode="scaleToFill"
          ></image>
          <view class="fm-cc">
            <text>{{ item.name }}</text>
            <view class="fm-pj">
              <u-icon
                size="20"
                name="star-fill"
                color="#EEA427"
                class="ico"
              ></u-icon>
              <text class="scr">{{ item.score }}</text>
              <text class="pl">{{ item.comment }}条评论</text>
              <text class="pl">门票 ¥{{ item.tick }}起</text>
            </view>
            <view class="fm-yx">
              <text>{{ item.type }}</text>
              <text>{{ item.area }}</text>
            </view>
            <view class="fm-rk">
              <text class="yl">{{ item.rank }}</text>
              <text class="gr">{{ item.out }}</text>
            </view>
          </view>
          <view class="fm-rg">{{ item.km }}km</view>
        </view>
        <view class="zk">
          <text class="js">已减22</text>
          <text class="pr">¥ 88</text>
          <text class="zz">{{ item.zz }}</text>
        </view>
        <view class="zk">
          <text class="js">7.0折</text>
          <text class="pr">¥ 88</text>
          <text class="zz">{{ item.nz }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "detail",
  components: {},
  data: () => ({
    keyword: "",
    list1: [
      {
        name: "全部",
      },
      {
        name: "共享",
      },
      {
        name: "采摘",
      },
      {
        name: "有机",
      },
      {
        name: "亲子",
      },
      {
        name: "露营",
      },
      {
        name: "团建",
      },
      {
        name: "婚礼",
      },
      {
        name: "手工",
      },
    ],
    farmList: [
      {
        id: 1,
        name: "新农人农庄",
        score: 4.8,
        comment: 100,
        tick: 30,
        type: "亲子研学",
        area: "黄陂区",
        rank: "武汉亲子农场人气榜第一",
        out: "踏青赏花",
        km: "24",
        zz: "【两大一小】麦芽糖+蔗糖手工制作",
        nz: "【特价团购】农庄喂猪",
      },
      {
        id: 2,
        name: "新农人农庄",
        score: 4.8,
        comment: 100,
        tick: 30,
        type: "亲子研学",
        area: "黄陂区",
        rank: "武汉亲子农场人气榜第一",
        out: "踏青赏花",
        km: "24",
        zz: "【两大一小】麦芽糖+蔗糖手工制作",
        nz: "【特价团购】农庄喂猪",
      },
      {
        id: 3,
        name: "新农人农庄",
        score: 4.8,
        comment: 100,
        tick: 30,
        type: "亲子研学",
        area: "黄陂区",
        rank: "武汉亲子农场人气榜第一",
        out: "踏青赏花",
        km: "24",
        zz: "【两大一小】麦芽糖+蔗糖手工制作",
        nz: "【特价团购】农庄喂猪",
      },
      {
        id: 4,
        name: "新农人农庄",
        score: 4.8,
        comment: 100,
        tick: 30,
        type: "亲子研学",
        area: "黄陂区",
        rank: "武汉亲子农场人气榜第一",
        out: "踏青赏花",
        km: "24",
        zz: "【两大一小】麦芽糖+蔗糖手工制作",
        nz: "【特价团购】农庄喂猪",
      },
    ],
    active: false,
    sortList: [
      {
        name: "综合排序",
      },
      {
        name: "离我最近",
      },
      {
        name: "好评优先",
      },
      {
        name: "人均最低",
      },
      {
        name: "人均最高",
      },
    ],
    curIndex: 0,
    addList: [
      {
        type: "指定地址",
        user: "陈小姐",
        phone: "13888888888",
        add1: "银泰创意城（街道口店）",
        add2: "武汉大学信息学部",
        add3: "武汉大学信管院",
      },
      {
        type: "我的附近",
        add1: "银泰创意城（街道口店）",
        add2: "武汉大学信息学部",
        add3: "武汉大学信管院",
      },
      {
        type: "行政区 ",
        add1: "蔡甸区",
        add2: "东西湖区",
        add3: "汉阳区 ",
        add4: "汉南区",
      },
    ],
    addIndex: 0,
    show: false,
    radiolist1: [
      {
        name: "武汉大学信息学部",
        user: "陈小姐",
        phone: "13888888888",
        disabled: false,
      },
      {
        name: "武汉大学信管院",
        user: "陈小姐",
        phone: "13888888888",
        disabled: false,
      },
    ],
    // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
    radiovalue1: "苹果",
    sorts: "",
    mores: false,
    closes: false,
    areList: [
      "蔡甸区",
      "东西湖区",
      "汉阳区 ",
      "汉南区",
      "蔡甸区",
      "硚口区",
      "汉阳区 ",
      "汉南区",
    ],
    isOpen: false, // 地址栏
    pxOpen: false, // 排序
    sxOpen: false, //筛选
    pirceList: ["0-25", "25-88", "88-170", "170-260"],
    top: "",
    low: "",
    ncList: [
      "共享菜园",
      "亲子研学",
      "有机购买",
      "采摘垂钓",
      "团建",
      "婚礼",
      "露营",
    ],
    yyList: ["营业中", "24小时营业"],
    pzList: ["5星好评", "4.5星以上"],
  }),
  computed: {},
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  onLoad(options) {},
  // 生命周期 - 页面展示（不可以访问DOM元素）
  onShow() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  onReady() {},
  // 方法集合
  methods: {
    open(e) {
      console.log("open", e);
      this.active = true;
      this.pxOpen = true;
      this.sxOpen = false;
    },
    close(e) {
      console.log("close", e);
      this.active = false;
      // this.pxOpen = false;
    },
    sortOpen(i) {
      console.log(i, "ssss");
      this.isOpen = true;
      this.active = true;
      this.pxOpen = false;
      this.sxOpen = false;
    },
    addClick(i) {
      console.log(i, "修改索引");
      this.addIndex = i;
    },
    groupChange(n) {
      console.log("groupChange", n);
    },
    radioChange(n) {
      console.log("radioChange", n);
    },
    groupChange1(n) {
      console.log("groupChange1", n);
      this.curIndex = n;
    },
    radioChange1(n) {
      console.log("radioChange1", n);
      this.curIndex = n;
    },
    moreMD() {
      console.log("mmmm");
      this.mores = true;
      this.closes = true;
      this.radiolist1.push(
        {
          name: "武汉大学",
          disabled: false,
          user: "陈小姐",
          phone: "13888888888",
        },
        {
          name: "长江大学",
          disabled: false,
          user: "陈小姐",
          phone: "13888888888",
        }
      );
    },
    closesMD() {
      this.mores = false;
      this.closes = false;
      this.radiolist1.splice(2);
    },
    chooseCol() {
      this.pxOpen = false;
      this.active = false;
      this.isOpen = false;
      this.sxOpen = false;
    },
    choosePX() {
      this.isOpen = false;
      this.active = false;
    },
    sxopens() {
      console.log("地址");
      this.pxOpen = true;
      this.active = true;
      this.isOpen = false;
      this.sxOpen = false;
    },
    sxMethod() {
      this.sxOpen = true;
      this.pxOpen = false;
      this.active = true;
      this.isOpen = false;
    },
    sxCloses() {
      this.active = false;
      this.isOpen = false;
      this.sxOpen = false;
      this.pxOpen = false;
    },
    chooseSx() {
      this.sxCloses();
    },
    handleMenuTap(index) {
      this.addIndex = index; // 设置选中的内容索引
    },
    changeTop() {},
    changeLow() {},
    goproductdetails(id) {
      uni.navigateTo({
        url: "/packageB/productdetails/productdetails?id=" + id,
      });
    },
  },
};
</script>

<style lang='scss' scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

.u-page {
  padding: 0;

  &__item {
    &__title {
      &__slot-title {
        color: #8d8683;
        font-size: 14px;
      }
    }
  }
}

.detail {
  font-family: "Poppins";
  background-color: #f9f9f9;
  position: absolute;
  width: 100%;
  height: 100%;
  .ser {
    display: flex;
    margin-bottom: 20rpx;
    navigator {
      margin-left: 3%;
      display: flex;
    }
    .sss {
      width: 80%;
    }
  }
  .pxactive {
    display: flex;
    margin-top: 20rpx;
    padding: 4%;
    background: white;
    .pc {
      display: flex;
      .tle {
        width: 200rpx;
        color: #8d8683;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      // .arr {
      //   margin-left: 2000rpx;
      // }
      .zx {
        margin-left: 180rpx;
        display: flex;
      }
    }
    .ss {
      margin-left: 20%;
      color: #8d8683;
    }
  }
  .px {
    display: flex;
    margin: 20rpx 0;
    padding-left: 5%;

    .pc {
      display: flex;
      .tle {
        width: 200rpx;
        color: #8d8683;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .arr {
        margin-left: 200rpx;
      }
      .zx {
        margin-left: 30rpx;
        display: flex;
      }
      .names {
        font-size: 30rpx;
      }
    }
    .ss {
      margin-left: 20%;
      color: #8d8683;
    }
  }
  .container {
    display: flex;
    background: #fff;
    .left-menu {
      width: 30%; /* 左侧栏目宽度 */
      // height: 700rpx;
      background: #f8f8f8;
      text-align: center;
      font-size: 28rpx;
      .left {
        padding: 20rpx;
        color: #8d8683;
      }
      .txt {
        color: #000;
      }
    }
    .right-content {
      flex: 1; /* 右侧内容占据剩余空间 */
      .ct-zd {
        margin-left: 10%;
        margin-top: 10rpx;
        color: #000;
        font-size: 26rpx;
        .zd-dq {
          display: flex;
          align-items: center;
          font-size: 26rpx;
          .zd-xg {
            font-size: 20rpx;
            color: #bcbbbb;
            border: 1px solid #bcbbbb;
            border-radius: 10rpx;
            margin-left: 5%;
          }
        }
        .zd-wd {
          margin: 20rpx 0;
          .wd-item {
            margin: 10rpx 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .wd-name {
              display: flex;
              color: #8d8683;
              view {
                font-size: 26rpx;
                .zd-xg {
                  font-size: 20rpx;
                  color: #bcbbbb;
                  border: 1px solid #bcbbbb;
                  border-radius: 10rpx;
                  margin-left: 5%;
                }
              }
              .zd-wd {
                margin: 20rpx 0;
                .wd-item {
                  margin: 10rpx 0;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  .wd-name {
                    display: flex;
                    color: #8d8683;
                    view {
                      margin-right: 10rpx;
                    }
                  }
                }
              }
            }
          }
        }
        .zd-more {
          display: flex;
        }
        .btn {
          display: flex;
          justify-content: space-around;
          margin: 20rpx 0;
          .bt {
            width: 40%;
          }
        }
      }
      .ct-fj {
        margin-left: 5%;
        font-size: 28rpx;
        margin-top: 10rpx;
        .h2 {
          color: #000;
        }
        .zd-wd {
          margin: 20rpx 0;
          .wd-item {
            margin: 10rpx 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .wd-name {
              display: flex;
              color: #8d8683;
              view {
                margin-right: 10rpx;
              }
            }
          }
        }
        .zd-more {
          display: flex;
        }
        .btn {
          display: flex;
          justify-content: space-around;
          margin: 20rpx 0;
          .bt {
            width: 40%;
          }
        }
      }
      .ct-xz {
        margin-left: 5%;
        color: #000;
        margin-top: 10rpx;
        font-size: 28rpx;
        .xz-item {
          display: flex;
          flex-wrap: wrap;
          width: 100%;
          margin-bottom: 200rpx;
          .xzz {
            flex-basis: 24%;
            margin: 20rpx 0rpx;
            font-size: 26rpx;
          }
        }
        .btn {
          display: flex;
          justify-content: space-around;
          margin: 20rpx 0;
          .bt {
            width: 40%;
          }
        }
      }
    }
  }
  .container1 {
    background: #fff;
    padding: 5% 10%;
    font-size: 28rpx;
    .wd-item {
      display: flex;
      margin: 10rpx 0;
      .wd-rd {
        margin-left: 70%;
      }
    }
    .btn {
      display: flex;
      justify-content: space-around;
      margin: 20rpx 0;
      .bt {
        width: 40%;
      }
    }
  }
  .container2 {
    display: flex;
    // height: 400rpx;
    .left {
      width: 30%;
      text-align: center;
      margin-top: 20rpx;
    }
    .right {
      font-size: 28rpx;
      width: 70%;
      background: #fff;
      .btn {
        display: flex;
        justify-content: space-around;
        margin: 20rpx 0;
        .bt {
          width: 40%;
        }
      }
      .items {
        margin: 5%;
        .pro {
          display: flex;
          margin-top: 10rpx;
          .prs {
            .ppp {
              margin-right: 20rpx;
            }
          }
        }
        .jg {
          display: flex;
          align-items: center;
          margin-bottom: 20rpx;
          .lins {
            margin: 0 40rpx 0 20rpx;
          }
          .j-btn {
            width: 25%;
            height: 60rpx;
          }
        }
        .lx {
          display: flex;
          flex-wrap: wrap;
          font-size: 26rpx;
          margin-bottom: 20rpx;
          .lxx {
            width: 30%; /* 设置每个项目的宽度，减去间距 */

            .ppp {
              margin: 10rpx 0;
            }
          }
        }
      }
    }
  }

  .farm {
    .farm-item {
      background-color: #fff;
      width: 95%;
      margin: 20rpx auto;
      border-radius: 20rpx;
      .fm {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        .logo {
          width: 150rpx;
          height: 150rpx;
          border-radius: 10rpx;
          margin: 20rpx 3% 0 3%;
        }
        .fm-cc {
          .fm-pj {
            display: flex;
            font-size: 28rpx;
            .scr {
              color: #eea427;
              margin-right: 20rpx;
            }
            .pl {
              color: #8d8683;
              margin-right: 20rpx;
            }
          }
          .fm-yx {
            display: flex;
            color: #8d8683;
            font-size: 28rpx;
            text {
              margin-right: 20rpx;
            }
          }
          .fm-rk {
            display: flex;
            color: #fff;
            font-size: 24rpx;
            .yl {
              background-color: #eea427;
              border-radius: 10rpx;
              margin-right: 10rpx;
              padding: 0 10rpx;
            }
            .gr {
              background-color: #05c160;
              border-radius: 10rpx;
              padding: 0 10rpx;
            }
          }
        }
        .fm-rg {
          color: #8d8683;
          font-size: 30rpx;
        }
      }
      .zk {
        display: flex;
        margin-top: 20rpx;
        padding-bottom: 20rpx;
        .js {
          border: 1px solid #fd1d04;
          color: #fd1d04;
          border-radius: 20rpx;
          font-size: 26rpx;
          padding: 0 10rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100rpx;
          text-align: center;
          margin-left: 5%;
        }
        .pr {
          color: #fd1d04;
          font-weight: bold;
          margin: 0 10rpx;
        }
        .zz {
          color: #8d8683;
          font-size: 28rpx;
        }
      }
    }
  }
}
</style>

